<!DOCTYPE html>
<html lang="en">
	<head>
		<title>John Doe</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<link rel="stylesheet" type="text/css" href="style/scrollpath.css" /> 
		<link rel="stylesheet" type="text/css" href="style/style.css" /> 
		<meta name="description" content="" /> 
		<meta name="keywords" content="" /> 
	</head>
	<body>
		<div class="wrapper">
			<header id="me">
				<h1> I'm John Doe, </h1>
				<h2> Web Frontend Developer. </h2>
			</header>
			<section id="about">
				<h1>About Me</h1>
				<p>
					I'm a creative web fanatic with ten years of experience under my belt. 
					I strive to create great user experience on the web, 
					both in design and code. By looking at my work, 
					you'll see that I settle for nothing short of perfection.
				</p>
			</section>
			<section id="designed">
				<h1>Things I've Designed</h1>
				<ul class="gallery">
					<li><img src="http://placebox.es/200x140/?t=1" alt="placeholder"></li>
					<li><img src="http://placebox.es/200x140/?t=2" alt="placeholder"></li>
					<li><img src="http://placebox.es/200x140/?t=3" alt="placeholder"></li>
					<li><img src="http://placebox.es/200x140/?t=4" alt="placeholder"></li>
				</ul>
			</section>
			<section id="developed">
				<h1>Things I've Developed</h1>
				<ul class="gallery">
					<li><img src="http://placebox.es/200x140/?t=5" alt="placeholder"></li>
					<li><img src="http://placebox.es/200x140/?t=6" alt="placeholder"></li>
					<li><img src="http://placebox.es/200x140/?t=7" alt="placeholder"></li>
					<li><img src="http://placebox.es/200x140/?t=8" alt="placeholder"></li>
				</ul>
			</section>
			<section id="contact">
				<h1>Contact</h1>
				<p>
					If you want to get in touch, shoot me an email at <a href="#">john@doe.me</a>. I'm also on <a href="#">Twitter</a>, <a href="#">Google+</a>
					and <a href="#">Facebook</a>, in case you feel like saying hello.
				</p>
			</section>
		</div>
		<nav>
			<ul>
				<li><a href="#me">Home</a></li>
				<li><a href="#about">About</a></li>
				<li><a href="#designed">Design</a></li>
				<li><a href="#developed">Development</a></li>
				<li><a href="#contact">Contact</a></li>
			</ul>
		</nav>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="script/min.jquery.scrollpath.js"></script>
		<script>
			// Get the path object from the plugin.
			var path = $.fn.scrollPath("getPath");
			
			// Start the path at the center of #me
			path.moveTo( 300, 150, { name: "me" });
			// Vertical line going right towards the #about section
			path.lineTo( 1600, 150, { name: "about" });
			// Arc down towards the design gallery, rotating a quarter of a circle along the way
			path.arc( 1600, 975, 825, -Math.PI/2, 0, false, { rotate: -Math.PI/2 }); 
			// Short vertical line to the design gallery
			path.lineTo( 2425, 1150, { name: "designed" });
			// Diagonal line down to the development gallery
			path.lineTo( 1050, 1450, { name: "developed" });
			// Another line diagonal going up towards to the contact section
			path.lineTo( -525, 1050, { name: "contact" });
			// Short vertical line upwards
			path.lineTo( -525, 975 );
			// The last arc that connects back to the beginning,
			// going clockwise from the left to the top while rotating.
			path.arc( 300, 975, 825, -Math.PI, -Math.PI/2, false, { rotate: -Math.PI } );
			// Rotate back to original angle.
			path.rotate( 0 );
			
			// Initiate the plugin
			$(".wrapper").scrollPath({ drawPath: false, wrapAround: true });

			// Set navigation link click behavior to animate to the different sections
			// over a duration of 2 seconds.
			$("nav a").click(function(e) {
				e.preventDefault();
				$.fn.scrollPath("scrollTo", this.hash.substring(1), 2000);
			});
		</script>
	</body>
</html>